<template>
  <h2>演示reactive的响应式数据</h2>
  <p>用户的姓名是:{{ user.name }}</p>
  <p>用户的年龄是:{{ user.age }}</p>
  <p>车的品牌是:{{ user.car.brand }}</p>
  <p>车的价格是:{{ user.car.price }}</p>
  <button @click="user.name += '@'">修改用户名</button>
  <!-- <button @click="user.age++">修改年龄</button> -->
  <button @click="changeAge">修改年龄</button>
  <button @click="user.car.price++">修改车的价格</button>
  <button @click="aa">给父组件传值</button>
  <hr />

  <p>源对象是:{{ user }}</p>
  <p>代理对象是:{{ obj }}</p>
  <p>使用reactive处理的count:{{ count }}</p>
  <button @click="changeCount">修改数据</button>
</template>

<script>
import { ref } from "vue"
export default {
  name: "HelloWord",
  props: ["msg", "school"], //属性用props来接受
  emits: ["hha"], //事件用emits来接收, 还是可以不写,但是会警告
  setup(a, v) {
    let user = {
      name: "jack",
      age: 20,
      car: {
        brand: "比亚迪",
        price: 160000,
      },
    }

    // 简单数据类型
    let count = ref(100) // 将简单数据类型传唤成响应式,数据和视图同步刷星
    // let count1 = reactive(100) // reactive不能将简单数据类型转换为响应式,页面不会刷新,但是数据可以

    // 复杂数据类型
    let obj = ref(user)

    function aa() {
      v.emit("hha", 123)
    }
    function changeAge() {
      // 使用这个修改对象,
      // 在这个时候,user不是用一个ref对象,reactive包裹的是一个obj,虽然他们的值是一样的,但是如果需要
      console.log(user)
      console.log(obj)
      // 如果使用ref对复杂数据类型来实现响应式的话,就相当于是用proxy来实现的,饶了一大圈,还是使用的reactive,先将元数据转为代理形式

      user.age++ // 这样不能做到响应式
    }
    function changeCount() {
      console.log(count)
      count.value = 200 // 使用ref需要使用.value来修改数据成响应式
      console.log(count)
    }
    return {
      user,
      aa,
      changeAge,
      count,
      changeCount,
      obj,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
